define([
    'require',
    'jquery',
    'cropper',
], function(require, $) {
    /*编辑头像*/
    ;(function($) {
        function CropAvatar($element) {
            this.$container = $element;

            this.$avatar = this.$container.find('img');
            this.$avatarModal = this.$container.parents('.wrap').siblings('#avatar_modal');

            this.$avatarForm = this.$avatarModal.find('.avatar-form');
            this.$avatarUpload = this.$avatarForm.find('.avatar-upload');
            this.$avatarSrc = this.$avatarForm.find('.avatar-src');
            this.$avatarData = this.$avatarForm.find('.avatar-data');
            this.$avatarInput = this.$avatarForm.find('.avatar-input');
            this.$avatarSave = this.$avatarForm.find('.avatar-save');
            this.$avatarBtns = this.$avatarForm.find('.avatar-btns');

            this.$avatarWrapper = this.$avatarModal.find('.avatar-wrapper');
            this.$avatarPreview = this.$avatarModal.find('.avatar-preview');

            this.init();
        }

        CropAvatar.prototype = {
            constructor: CropAvatar,
            support: {
                fileList: !!$('<input type="file">').prop('files'),
                blobURLs: !!window.URL && URL.createObjectURL,
                formData: !!window.FormData
            },

            init: function() {
                this.support.datauri = this.support.fileList && this.support.blobURLs;

                // if (!this.support.formData) {
                //     this.initIframe();
                // }

                // this.initTooltip();
                this.initModal();
                this.addListener();
            },

            addListener: function() {
                this.$container.on('click', $.proxy(this.click, this));
                this.$avatarInput.on('change', $.proxy(this.change, this));
                this.$avatarForm.on('submit', $.proxy(this.submit, this));
                this.$avatarBtns.on('click', $.proxy(this.rotate, this));
            },

            initModal: function() {
                this.$avatarModal.modal({
                    show: false
                });
            },

            initPreview: function() {
                var url = this.$avatar.attr('src');
                this.$avatarPreview.empty().html('<img src="' + url + '">');
                /*重置*/
                this.stopCropper();
                this.$avatarWrapper.empty();
            },

            click: function() {
                this.$avatarModal.modal('show');
                this.initPreview();
            },

            change: function() {
                var files,
                    file;

                if (this.support.datauri) {
                    files = this.$avatarInput.prop('files');

                    if (files.length > 0) {
                        file = files[0];

                        if (this.isImageFile(file)) {
                            if (this.url) {
                                URL.revokeObjectURL(this.url); // Revoke the old one
                            }

                            this.url = URL.createObjectURL(file);
                            this.startCropper();
                        }
                    }
                } else {
                    file = this.$avatarInput.val();

                    if (this.isImageFile(file)) {
                        this.syncUpload();
                    }
                }
            },

            submit: function() {
                if (!this.$avatarSrc.val() && !this.$avatarInput.val()) {
                    return false;
                }

                if (this.support.formData) {
                    this.ajaxUpload();
                    return false;
                }
            },

            rotate: function(e) {
                var data;

                if (this.active) {
                    data = $(e.target).data();

                    if (data.method) {
                        this.$img.cropper(data.method, data.option);
                    }
                }
            },

            isImageFile: function(file) {
                if (file.type) {
                    return /^image\/\w+$/.test(file.type);
                } else {
                    return /\.(jpg|jpeg|png|gif)$/.test(file);
                }
            },

            startCropper: function() {
                var _this = this;

                if (this.active) {
                    this.$img.cropper('replace', this.url);
                } else {
                    this.$img = $('<img src="' + this.url + '">');
                    this.$avatarWrapper.empty().html(this.$img);
                    this.$img.cropper({
                        aspectRatio: 1,
                        preview: this.$avatarPreview.selector,
                        // strict: false,
                        dragCrop: false,
                        crop: function(data) {
                            var json = [
                                '{"x":' + data.x,
                                '"y":' + data.y,
                                '"height":' + data.height,
                                '"width":' + data.width,
                                '"rotate":' + data.rotate + '}'
                            ].join();

                            _this.$avatarData.val(json);
                        }
                    });

                    this.active = true;
                }
            },

            stopCropper: function() {
                if (this.active) {
                    this.$img.cropper('destroy');
                    this.$img.remove();
                    this.active = false;
                }
            },

            ajaxUpload: function() {
                var url = this.$avatarForm.attr('action'),
                    data = new FormData(this.$avatarForm[0]),
                    _this = this;
                $.ajax({
                    url: url,
                    type: 'post',
                    data: data,
                    dataType: 'json',
                    processData: false,
                    contentType: false,

                    success: function(data) {
                        _this.submitDone(data);
                    },

                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        _this.submitFail(textStatus || errorThrown);
                    },

                });
            },

            syncUpload: function() {
                this.$avatarSave.click();
            },

            submitDone: function(data) {
                if (data.ret == 0) {
                    if (data.data) {
                        this.url = data.data;

                        if (this.support.datauri || this.uploaded) {
                            this.uploaded = false;
                            this.cropDone();
                        } else {
                            this.uploaded = true;
                            this.$avatarSrc.val(this.url);
                            this.startCropper();
                        }

                        this.$avatarInput.val('');
                    } else if (data.message) {
                        this.alert(data.message);
                    }
                } else {
                    this.alert(data.msg);
                }
            },

            submitFail: function(msg) {
                this.alert(msg);
            },

            cropDone: function() {
                this.$avatarForm.get(0).reset();
                this.$avatar.attr('src', this.url);
                $('.top_main_nav .js_face_img').prop('src', this.url);
                this.stopCropper();
                this.$avatarModal.modal('hide');
            },

            alert: function(msg) {
                var $alert = [
                    '<div class="alert alert-danger avater-alert" style="margin: 0;">',
                    '<button type="button" class="close" data-dismiss="alert">&times;</button>',
                    msg,
                    '</div>'
                ].join('');

                this.$avatarBtns.find('.avt_tit').empty().append($alert);
            }
        };

        return new CropAvatar($('.head_portrait'));
    })(jQuery);
})
